import { InputNumber } from 'antd';
import mockData from './mock.json';
import { memo, useCallback, useState } from 'react';
const MemoInput = memo(({ item, onChange, index }: any) => {
  console.log('更新了');
  return (
    <div>
      <span style={{ display: 'inline-block', width: 100 }}>{item.label}：</span>
      <InputNumber
        style={{ width: 150 }}
        value={item.value}
        onChange={(value) => onChange(value, index)}
      />
    </div>
  );
});
const Js01 = () => {
  const [list, setList] = useState(mockData.data);
  const changeValue = useCallback((value: number, index: number) => {
    setList((oldList) => {
      const newList = [...oldList];
      newList[index] = { ...oldList[index], value };
      return newList;
    });
  }, []);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
      {list.map((item, index) => (
        <MemoInput key={item.id} item={item} index={index} onChange={changeValue} />
      ))}
    </div>
  );
};
export default Js01;
